<template>
    <el-dialog 
        :visible.sync="dialogVisible" 
        width="520px">
        <div class="dialog-content">
            <span class="iconfont icon-close" @click="dialogVisible = false"></span>
            <img 
                class="pic-cls"
                :src="url" 
            >
            <el-button class="btn" type="primary" @click="getWelfare" :disabled="loading"></el-button>
        </div>
        
        
        <!-- <div class="header-cls">
            <span class="iconfont"  :style="{backgroundImage:`url(${imgObj.fuli})`}"></span>
            <h3>{{contentTitle}}</h3>
        </div>
        

        <section :class="['detail-content',!isTenantFresh ? 'content-center' : '']">
            <template v-if="isTenantFresh">
                <div class="content-item">
                    <div class="title"><b>100 </b><span>条短信</span></div>
                    <div class="icon" :style="{backgroundImage:`url(${imgObj.sms})`}"></div>
                </div>

                <div class="connection iconfont icon-add2"></div>
            </template>

            <div class="content-item">
                <div class="title"><b>100 </b><span>分钟电话</span></div>
                <div class="icon"  :style="{backgroundImage:`url(${imgObj.call})`}"></div>
            </div>
        </section>

        <div class="tip-cls">
            <span class="type">{{isTenantFresh ? '短信 + 电话' : '电话'}}</span>
            <span>强通知，再也不用担心错过重要消息啦~</span>
        </div> -->

    </el-dialog>
</template>

<script>
// assets
import { getLocalesOssUrl, getOssUrl } from '@src/util/assets'
const call = getOssUrl('/setting/call.png');
const sms = getOssUrl('/setting/sms.png');
const fuli = getLocalesOssUrl('/setting/fuli.png');

import * as SettingApi from '@src/api/SettingApi';
import { t } from '@src/locales';
export default {
    data(){
        return {
            imgObj:{
                call,
                sms,
                fuli
            },
            loading:false
        }
    },

    props:{
        value:{
            type:Boolean,
            required:true
        },

        // 是否是新用户
        isTenantFresh:{
            type:Boolean,
            required:true
        },

        getParamWelfare:{
            type:Object,
            required:true
        },
    },

    computed:{
        dialogVisible:{
            get(){
                return this.value;
            },

            set(val){
                this.$emit('input', val)
            }
        },

        url(){
            return this.isTenantFresh ? 'https://file.shb.ltd/shb-resource/img/website/welfare1.png' : 'https://file.shb.ltd/shb-resource/img/website/welfare2.png'
        },

        // contentTitle(){
        //     return this.isTenantFresh ? '新用户福利大放送！' : '老用户福利大放送！'
        // },

        tipContent(){
            return this.isTenantFresh ? t('setting.messageChannel.newUserWelfareTitle') : t('setting.messageChannel.oldUserWelfareTitle')
        }
    },

    methods:{
        async getWelfare(){
            
            try{
                this.loading = true
                const { status, message, data } = await SettingApi.messageTake(this.getParamWelfare);
                this.loading = false

                this.$platform.notification({
                    title: status === 0 ? this.$t('common.base.receiveSuccess') : this.$t('common.base.receiveError'),
                    message: status === 0 ? '' : message,
                    type: status === 0 ? 'success' : 'error'
                });

                if(status !== 0) return;

                this.dialogVisible = false
                this.$emit('getSuc')
            }catch(error){
                this.loading = false
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.dialog-content{
    width:500px;
    position:relative;
    .icon-close{
        position: absolute;
        right: 7px;
        top: -27px;
        font-size:20px;
        color:#D9D9D9;
        cursor: pointer;
    }
    .pic-cls{
        width:100%;
    }
    .btn{
        position: absolute;
        bottom:70px;
        bottom: 65px;
        left: 148px;
        width: 204px;
        padding: 20px 0;
        opacity: 0;
    }
}


::v-deep .el-dialog__body{
    padding:21px 20p 40px;
    
    
}
::v-deep {
    .el-dialog__headerbtn{
        display: none;
    }
    .el-dialog,.el-dialog__header{
        background:transparent;
        box-shadow:none;
    }
}
.header-cls{
    height:40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin:0 0 16px;
  
    .iconfont{
        width: 40px;
        height: 40px;
        background-size: contain;
        margin-right:12px;
        background-repeat: no-repeat;
        background-size:contain;
    }
    h3{
        width: 180px;
        height: 28px;
        font-size: 20px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FF6332;
        line-height: 28px;
        margin:0;
    }
}
.detail-content{
    width: 450px;
    height: 168px;
    margin:0 auto;
    background: linear-gradient(180deg, #FEFBF5 0%, #FCF6E7 100%);
    border-radius: 12px;
    border: 2px solid #EABB6A;
    display:flex;
    justify-content:space-between;
    padding:25px 60px 24px 47px;
    .content-item{
        .title{
            b{
                height: 32px;
                font-size: 24px;
                font-weight: 500;
                color: #262626;
                line-height: 32px;
            }
            span{
                margin-left:4px;
                height: 22px;
                font-size: 14px;
                font-weight: 400;
                color: #595959;
                line-height: 22px;
            }
        }
        .icon{
            margin-top:13px;
            width: 74px;
            height: 74px;
            
            border-radius: 25px;
            background-size: contain;
        }
    }
    .connection{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #F2D5A4;
        color:#fff;
        font-size: 22px;
        margin-top:63px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.content-center{
    justify-content:center;
    .content-item .icon{
        margin:13px auto 0;
    }
}

.tip-cls{
    margin-top:24px;
    height: 22px;
    font-size: 16px;
    font-weight: 500;
    
    color:#262626;
    line-height: 22px;
    text-align: center;
    .type{
        color: #FF7043;
        margin-right:2px;
    }
}

</style>